<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--导入elementUI样式-->
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
	<!--导入vue js文件-->
    <script src="js/vue-v2.6.10.js"></script>
	<!--导入elementUI js文件-->
    <script src="element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--
    分页组件
      @size-change： 当改变每页条数时触发的钩子函数
      @current-change：当改变页码时触发的钩子函数
		  current-page ：默认的页码
      :page-sizes：每页条数选择框中显示的值
      :page-size : 默认的每页条数
      layout： 分页组件的布局
          total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
      :total: 总条数
-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                current-page="1"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{},
        methods:{
            handleSizeChange(pageSize){
                alert("切换每页条数:"+pageSize);
            },
            handleCurrentChange(currentPage){
                alert("切换页面："+currentPage);
            }
        }
    });
</script>
</html>